<template>
  <div class="pd30 flex flexjcsa produceFactory">
    <div class="panelWrap catalog">
      <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <div>广告屏组</div>
        <!-- <el-button type="primary" icon="el-icon-plus" class="addCatalog" circle @click="handleAddLog" /> -->

      </div>
      <div class="catalog-list flex fs14 fwb">
        <el-tree :load="loadNode" :props="defaultProps" lazy @node-click="handleNodeClick"></el-tree>
        <div v-for="(item,index) in catalog" :key="item.id" :class="['list-item',logIndex == index ? 'activeLog' : '']" @click="handleLogCheck(item,index)">
          <i class="el-icon-folder" />
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="panelWrap main">
      <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <div v-if="currentLog!=null">
          <div v-show="!isLogEdit">
            <span class="log-name">{{ currentLog.name }}</span>
            <el-button size="small" type="warning" icon="el-icon-edit-outline" @click="handleEdit" />
            <el-button size="small" type="warning" icon="el-icon-delete" @click="handleRemove" />
          </div>
          <el-input v-show="isLogEdit" ref="editInput" v-model="currentLog.name" class="query-input" @blur="handleBlur" />
        </div>
        <div class="dialog">
          <el-dialog custom-class="my-dialog" :title="isEdit ? '修改广告屏': '安装广告屏'" :visible="dialogFormVisible">

            <el-form ref="addData" label-position="left" :model="tableData" label-width="100px">
              <div>
                <el-form-item v-show="isEdit" label="商圈" prop="businessAreaId">
                  <el-select v-model="tableData.businessAreaId" clearable placeholder="请选择商圈">
                    <el-option v-for="(item,index) in businessList" :key="index" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>

                <el-form-item v-show="isEdit" label="小区" prop="businessAreaId">
                  <el-select clearable placeholder="请选择小区">
                    <el-option v-for="(item,index) in villageList" :key="index" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>

                <el-form-item v-show="isEdit" label="目录分组" prop="directoryId">
                  <el-select v-model="tableData.directoryId" clearable placeholder="请选择目录分组">
                    <el-option v-for="(item,index) in catalog" :key="index" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>

                <el-form-item v-show="isEdit" label="电梯ID" prop="elevatorId">
                  <el-col :span="12">
                    <el-input v-model="tableData.elevatorId" class="com-input" placeholder="请选择电梯ID" readonly />
                  </el-col>
                  <el-col :span="12">
                    <el-button type="warning" class="m-l-20" @click="handleSelect(4,'电梯')">选择电梯ID</el-button>
                  </el-col>
                </el-form-item>

                <el-form-item v-show="isEdit" label="往来单位" prop="entId">
                  <el-col :span="12">
                    <el-input v-model="tableData.entId" class="com-input" placeholder="请选择往来单位ID" readonly />
                  </el-col>
                  <el-col :span="12">
                    <el-button type="warning" class="m-l-20" @click="handleSelect(2,'往来单位')">选择往来单位</el-button>
                  </el-col>
                </el-form-item>

                <el-form-item label="安装时间">
                  <el-form-item prop="installDate">
                    <el-date-picker v-model="tableData.installDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="安装时间" style="width: 100%;" />
                  </el-form-item>
                </el-form-item>

                <el-form-item label="安装人员" prop="installUserId">
                  <el-select v-model="tableData.installUserId" clearable placeholder="请选择安装人员ID">
                    <el-option v-for="(item,index) in userList" :key="index" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
              </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="addScreen(false)">取 消</el-button>
              <el-button v-if="!isEdit" type="primary" @click="addScreen(true)">确 定</el-button>
              <el-button v-else type="isEdit" @click="handleEditLog">更 新</el-button>
            </div>
          </el-dialog>

          <!-- <el-button @click="dialogFormVisible = true" class="addBtn fw" type="primary">安装广告屏</el-button> -->
        </div>
      </div>
      <div class="con">
        <div class="con-row flex flexac pl search-box">
          <div class="flex">
            <el-select v-model="queryParam.status" clearable class="isWechat-select coInput m-r-15" placeholder="状态" @change="handleStatusChange">
              <el-option label="待安装" :value="0" />
              <el-option label="已安装" :value="1" />
              <el-option label="停用" :value="3" />
            </el-select>
            <el-input v-model="queryParam.name" clearable class="query-input m-r-15" placeholder="名称" @blur="handleSearch" />
            <el-date-picker v-model="queryParam.startDate" class="query-input m-r-15" value-format="yyyy-MM-dd" :picker-options="pickerOption" clearable type="date" placeholder="开始日期" @change="handleEndDate" />
            <el-date-picker v-model="queryParam.endDate" class="query-input m-r-15" value-format="yyyy-MM-dd" :picker-options="pickerOption" clearable type="date" placeholder="结束日期" @change="handleEndDate" />
          </div>

        </div>
        <div class="flex flexac pl p-b-10 search-box">
          <el-dropdown class="m-l-10 m-t-10" trigger="click" @command="handleMoveAdvert">
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in catalog" :key="item.id" :command="item.id"><i class="el-icon-folder el-icon--left" />{{ item.name }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button v-for="(item,index) in commandList" :key="index" class="defaultbtn m-t-10" type="primary" @click="sendCommand(item.command)">
            <i class="iconfont icon-wenjiandaochu" />{{ item.name }}
          </el-button>
        </div>
        <el-table id="dataList" ref="dataList" class="con-table" type="expand" :data="dataList.slice((paging.currentPage - 1) * paging.pageSize, paging.currentPage * paging.pageSize)" @row-click="handleRowClick" @select="handleCheck" @select-all="handleCheck" @selection-change="handleCheckChange">
          <el-table-column width="50" type="selection" label="全选" />

          <el-table-column align="center" label="名称">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="所属商圈名称">
            <template slot-scope="scope">
              <span>{{ scope.row.businessAreaName }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="所属小区名称">
            <template slot-scope="scope">
              <span>{{ scope.row.villageName }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="序列号">
            <template slot-scope="scope">
              <span>{{ scope.row.serialNo }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="分组">
            <template slot-scope="scope">
              <span>{{ scope.row.directoryName }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <el-tag :type="tagType[scope.row.status]" effect="dark">
                {{ status[scope.row.status] }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="name" align="center" label="操作">
            <template slot-scope="scope">
              <el-dropdown trigger="click" @command="handleCommand">
                <el-button size="small" type="primary">
                  <i class="el-icon-s-tools" />
                  <i class="el-icon-arrow-down el-icon--right" />
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="0"><i class="el-icon-edit el-icon--left" />修改</el-dropdown-item>
                  <el-dropdown-item :command="1"><i class="el-icon-delete el-icon--left" /> 删除</el-dropdown-item>
                  <el-dropdown-item :command="2"><i class="el-icon-setting el-icon--left" /> 安装</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <!-- <el-button class="defaultbtn" type="primary" plain @click="handleEdit(scope.$index, scope.row)">
                <i />查看</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="paginationWrap flex" :current-page="paging.currentPage" :page-sizes="paging.pageSizeArr" :page-size="paging.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="paging.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <div class="panelWrap details">
      <el-table :data="currentMateria" stripe style="width: 100%">
        <el-table-column prop="key" label="属性" width="100" />
        <el-table-column prop="val" label="值" width="250" />
      </el-table>
    </div>
    <el-dialog title="素材预览" :visible.sync="dialogPreview">
      <div class="flex flextc">
        <el-image v-if="currentItem.fileType === 1" class="previewImg" fit="contain" :src="path" />
        <video v-if="currentItem.fileType === 2" class="previewVideo" controls :src="path" />
      </div>
    </el-dialog>
    <el-dialog title="审核素材" :visible.sync="dialogApprove">
      <el-input v-model="install.installDate" type="textarea" placeholder="请输入审核意见" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="screenInstall(false)">取 消</el-button>
        <el-button type="primary" @click="screenInstall(true)">确 定</el-button>
      </div>
    </el-dialog>
    <pubSelect v-model="coSelectVisible" :stock-type="2" :select-type="selectType" :title="selectTitle" @update="handleSelectUpdate" />
  </div>
</template>

<script>
import pubSelect from '@/components/pubSelect/index'
import { maStaffList } from '@/api/maintenance/maintenance'
import { fetchBusinessList } from '@/api/operation/business'
import { fetchList } from '@/api/baseInfo/village'
import { installOut } from '@/api/operation/BOM/opStockOut'
import { fetchScreenList, screenDetail, screenAdd, screenDelete, screenInstall, screenCommand, screenUpdate } from '@/api/operation/media/screen'
import { fetchCatalogList, catalogAdd, catalogUpdate, catalogDelete } from '@/api/operation/media/catalog'
import { planUpdate, planAddDeploy, planCoverDeploy, planUndeploy } from '@/api/operation/media/playPlan'
import { fetchAdvertList, advertDetail, advertAdd } from '@/api/operation/media/advertProduction'
import { formatDateTimeimport, transData } from '@/utils/toolclass'
import { showNotice } from '@/utils/toolclass'

export default {
  name: 'ScreenSystem',
  components: {
    pubSelect
  },
  props: {},
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name',
        isLeaf: 'leaf'
      },
      currentBusinessId:'',
      currentVillageId:'',
      commandList: [
        { name: '重启', command: 'RESTART' },
        { name: '睡眠', command: 'SLEEP' },
        { name: '下载', command: 'DOWNLOAD' },
        { name: '开启摄像头', command: 'OPEN_CAMERA' },
        { name: '关闭摄像头', command: 'CLOSE_CAMERA' },
        { name: '推流', command: 'PUSH_STREAM' },
        { name: '关闭推流', command: 'PUSH_STREAM_STOP' },
        { name: '会议', command: 'MEETING' },
        { name: '地图', command: 'MAP' },
        { name: '音量+', command: 'VOICE_INCREASE' },
        { name: '音量-', command: 'VOICE_REDUCE' },
        { name: '亮度+', command: 'LIGHT_INCREASE' },
        { name: '亮度-', command: 'LIGHT_REDUCE' },
        { name: '唤醒', command: 'WAKE' },
        { name: '插播', command: 'EMERGENCY_PLAY' },
        { name: '录像', command: 'RECORD' },
        { name: '救援电话', command: 'PHONE' }
      ],
      coSelectVisible: false,
      selectType: 0,
      selectTitle: '',
      userList: [],
      businessList: [],
      villageList:[],
      isLogEdit: false,
      tableName: 'name',
      deleteList: [],
      selectMateriaList: [], // 选择素材列表
      multipleSelection: [],
      moduleMateria: [], // 模块素材列表
      addData: { // 添加广告屏数据
        installDate: '',
        installUserId: '',
        screenId: ''
      },
      edit: {
        fileName: '',
        catalog: ''
      },
      install: {
        installDate: '',
        installUserId: '',
        screenId: ''
      },
      rowData: {},
      moveEnable: false,
      moveLogId: '',
      file: {},
      dialogMateria: false,
      dialogApprove: false,
      dialogEdit: false,
      dialogPreview: false,
      dialogFormVisible: false,
      fileList: [],
      timer: null,
      isEdit: false,
      logNmae: '',
      logIndex: 0,
      currentItem: {},
      currentMateria: [], // 当前素材
      currentLog: null, // 当前目录
      catalog: [], // 素材目录
      type: ['周期', '垫片', '插播'],
      executeMode: ['全天时段', '黄金时段', '普通时段'],
      resolution: ['1920*1080', '1080*1920', '1366*768', '768*1366', '1440*900', '900*1440'],
      tagType: ['warning', 'success', 'info'],
      status: ['待安装', '已安装', '', '停用'],
      fileType: ['图片', '视频', '文本'],
      outType: 1,
      userInfo: {},
      outState: '',
      pickerOption: {
        // 设置日期禁用状态
        disabledDate(date) {
          return date.getTime() > Date.now()
        }
      },
      delPro: '',
      paging: {
        currentPage: 1,
        pageSize: 10,
        pageSizeArr: [10, 20, 50, 100],
        total: 400
      },
      path: '',
      advertList: [],
      dataList: [],
      queryParam: {
        name: '',
        status: '',
        startDate: '',
        endDate: ''
      },
      visible: false,
      editSystem: {},
      refresh: false,
      url: require('@/assets/error.png'),
      seniorSet: {
        'field': false,
        'sortable': false
      }
    }
  },
  computed: {
    tableData() {
      return this.isEdit ? this.currentItem : this.addData
    }
  },
  watch: {},
  created() {
    this.getCatalogList()
    this.getBusiness()
    this.getVillage()
  },
  mounted() {
    this.userInfo = JSON.parse(this.$storage.get('userInfo'))
    this.$storage.set('upUrl', JSON.stringify({ 'path': '/operation/media/screenSystem/index' }))
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: '商圈' },{name: '小区'}]);
      }
      if (node.level > 1) return resolve([{name:'left'}]);
      if(node.label === '商圈'){
        setTimeout(() => {
          const data = this.businessList
          resolve(data);
        }, 500);
      }else if(node.label === '小区'){
        setTimeout(() => {
          const data = this.villageList;
          resolve(data);
        }, 500);
      }
    },
    handleNodeClick(data,node,self) {
      this.currentBusinessId = '';
      this.currentVillageId = '';
      if(node.parent.label === '商圈'){
        this.currentBusinessId = data.id || '';
      }else if(node.parent.label === '小区'){
        this.currentVillageId = data.id || '';
      }else{
        this.currentBusinessId = '';
        this.currentVillageId = '';
      }
      this.getList();
    },
    // 获取人员列表
    getMaStaffList() {
      maStaffList('', false, '', this.paging.currentPage, this.paging.pageSize).then(res => {
        if (res.code === '000000') {
          this.userList = res.data
        } else {
          showNotice('warning', '提示', res.msg)
        }
      })
    },
    handleSelect(type, title) {
      this.coSelectVisible = true
      this.selectType = type
      this.selectTitle = title
    },
    // 信息更新回调
    handleSelectUpdate(row) {
      switch (this.selectType) {
        case 2:
          this.tableData.entId = row.id
          break
        case 4:
          this.tableData.elevatorId = row.id
          break
        default:
          break
      }
    },
    // 获取小区列表
    getVillage(){
      fetchList('', '', 1, 1000).then(res=>{
        if (res.code === '000000') {
          this.villageList = res.data.map(item=>{
            return item = {leaf:true,...item};
          })
        } else {
          showNotice('warning', '提示', res.msg)
        }
      })
    },
    // 获取商圈列表
    getBusiness() {
      const params = {
        pageIndex: 1,
        pageSize: 1000
      }
      fetchBusinessList(params).then(res => {
        if (res.code === '000000') {
          this.businessList = res.data.map(item=>{
            return item = {leaf:true,...item};
          })
        } else {
          showNotice('warning', '提示', res.msg)
        }
      })
    },
    handleC(val) {
      console.log(val)
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    resetData() {
      this.addData = {
        installDate: '',
        installUserId: '',
        screenId: ''
      }
    },
    // 添加广告屏
    addScreen(flag) {
      if (flag) {
        this.addData.screenId = this.currentItem.id
        screenInstall(this.addData).then(res => {
          if (res.code === '000000') {
            this.getList()
            showNotice('success', '提示', '添加成功')
            this.resetData()
            this.dialogFormVisible = false
          } else {
            showNotice('warning', '提示', res.msg)
          }
        })
      } else {
        this.resetData()
        this.dialogFormVisible = false
        this.isEdit = false
      }
    },
    // 广告屏指令
    sendCommand(command) {
      const params = {
        command: command,
        pushStreamUrl: '',
        screenId: this.rowData.id
      }
      if (this.moveEnable && this.dataList.length > 0) {
        screenCommand(params).then(res => {
          if (res.code === '000000') {
            showNotice('success', '提示', '操作成功')
          } else {
            showNotice('warning', '提示', res.msg)
          }
        })
      } else {
        showNotice('warning', '提示', '请选择一个素材')
      }
    },
    // 安装广告屏
    screenInstall(flag) {
      if (flag) {

      } else {
        this.install = {}
        this.dialogApprove = false
      }
    },
    // 删除广告屏
    screenDelete() {
      this.$confirm('此操作将永久删除该广告,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'addDialog'
      }).then(({ value }) => {
        screenDelete(this.currentItem.id).then(res => {
          if (res.code === '000000') {
            showNotice('success', '提示', '删除成功')
            this.getList()
          } else {
            showNotice('warning', '提示', res.msg)
          }
        })
      }).catch(() => {
      })
    },
    // 编辑修改
    handleEditLog() {
      screenUpdate(this.tableData).then(res => {
        if (res.code === '000000') {
          showNotice('success', '提示', '修改成功')
          this.dialogFormVisible = false
          this.isEdit = false
          this.getList()
        } else {
          showNotice('warning', '提示', res.msg)
        }
      })
    },
    // 移动广告
    async handleMoveAdvert(val) {
      if (this.moveEnable && val != '' && this.dataList.length > 0) {
        const params = await this.getDetail(this.rowData.id)
        params.directoryId = val
        planUpdate(params).then(res => {
          if (res.code === '000000') {
            showNotice('success', '提示', '移动成功')
            this.moveLogId = ''
            this.getList()
          } else {
            showNotice('warning', '提示', res.msg)
          }
        })
      } else {
        showNotice('warning', '提示', '请选择一个素材')
      }
    },
    // 素材预览
    handlePreview() {
      this.dialogPreview = true
    },
    // 素材上传
    submitUpload() {
      this.$refs.upload.submit()
    },
    // 点击一行
    handleRowClick(row, column, event) {
      this.getDetail(row.id)
    },
    handleRowClick2(row, column, event) {
      // this.currentItem = row;
    },
    // 日期筛选
    handleEndDate() {
      this.getList()
    },
    // 审核状态筛选
    handleStatusChange() {
      this.getList()
    },
    // 编辑目录
    handleEdit() {
      this.$nextTick(() => {
        const timer = setTimeout(() => {
          this.$refs.editInput.focus()
        }, 100)
        this.$once('hook:beforeDestroy', function () {
          clearTimeout(timer)
        })
      })
      this.isLogEdit = true
    },
    // 修改目录
    handleBlur() {
      const params = {
        id: this.currentLog.id,
        name: this.currentLog.name,
        parentId: this.currentLog.parentId,
        type: this.currentLog.type,
        version: this.currentLog.version
      }
      catalogUpdate(params).then(res => {
        if (res.code === '000000') {
          this.getCatalogList()
          this.logIndex = 0
          showNotice('success', '提示', '修改成功!')
        }
      })
      this.isLogEdit = false
    },
    // 删除目录
    handleRemove() {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        catalogDelete(this.currentLog.id).then(res => {
          if (res.code === '000000') {
            this.getCatalogList()
            showNotice('success', '提示', '删除成功!')
          } else {
            showNotice('success', '提示', res.msg)
          }
        })
      }).catch(() => {
      })
    },
    // 添加目录
    handleAddLog() {
      this.$prompt('新建目录', '目录名', {
        confirmButtonText: '创建',
        cancelButtonText: '取消',
        customClass: 'addDialog'
      }).then(({ value }) => {
        const params = {
          type: 4,
          name: value
        }
        catalogAdd(params).then(res => {
          if (res.code === '000000') {
            this.getCatalogList()
            this.$message({
              type: 'success',
              message: '创建成功'
            })
          }
        })
      }).catch(() => {
      })
    },
    // 目录点击
    handleLogCheck(item, index) {
      this.currentLog = item
      this.logIndex = index
      this.getList()
    },
    // 操作下拉菜单
    handleCommand(i) {
      switch (i) {
        case 0:
          this.dialogFormVisible = true
          this.isEdit = true
          break
        case 1:
          this.screenDelete()
          break
        case 2:
          this.getMaStaffList();
          this.dialogFormVisible = true
          break
        default:
          break
      }
    },
    handleCheck(selection, row) {
      this.$refs.dataList.clearSelection()
      if (selection.length === 0) { // 判断selection是否有值存在
        return
      }
      if (row) {
        this.moveEnable = selection.length > 0
        this.$refs.dataList.toggleRowSelection(row, true)
        this.rowData = row
      }
    },
    handleCheck3(selection, row) {
      this.deleteList = selection
    },
    handleCheck2(selection, row) {
      this.selectMateriaList = selection
    },
    handleCheckChange(row) {
      if (row.length === 0) {
        this.moveEnable = false
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    // 名称搜索
    handleSearch() {
      this.getList()
    },
    // 获取目录列表
    getCatalogList() {
      const params = {
        pageIndex: 1,
        pageSize: 20,
        type: 4
      }
      fetchCatalogList(params).then(res => {
        if (res.code === '000000') {
          this.catalog = res.data
          this.currentLog = res.data[0]
          this.getList()
        }
      })
    },
    // 获取计划列表
    getList() {
      const params = {
        businessAreaId: this.queryParam.businessAreaId,
        directoryId: '',
        businessAreaId: this.currentBusinessId,
        villageId: this.currentVillageId,
        endDate: this.queryParam.endDate,
        name: this.queryParam.name,
        startDate: this.queryParam.startDate,
        status: this.queryParam.status,
        pageIndex: this.paging.currentPage,
        pageSize: this.paging.pageSize
      }
      fetchScreenList(params).then((res) => {
        if (res.code === '000000') {
          this.dataList = res.data
          if (res.data.length) {
            const index1 = res.data[0]
            this.currentItem = res.data[0]
            this.getDetail(index1.id)
          }
          const i = res.data.map((item, i) => i)
          this.paging.total = i.length
        }
      })
    },
    // 获取广告详情
    getDetail(id) {
      const data = screenDetail(id).then(res => {
        if (res.code === '000000') {
          this.currentItem = res.data
          this.formatData(res.data)
          return res.data
        } else {
          showNotice('warning', '提示', res.msg)
        }
      })
      return data
    },
    // 格式化数据
    formatData(data) {
      if (data) {
        this.currentMateria = [
          { key: '名称', val: data.name },
          { key: '序列号', val: data.serialNo },
          { key: '安装时间', val: data.installDate }
        ]
      }
    },
    handleSizeChange(val) {
      this.paging.pageSize = val
      this.getList()
    },
    handleSizeChange2(val) {
      this.paging.pageSize = val
      this.getAdvertList()
    },
    // 监听分页
    handleCurrentChange(val) {
      this.paging.currentPage = val
      this.getList()
    },
    handleCurrentChange2(val) {
      this.paging.currentPage = val
      this.getAdvertList()
    }
  }
}
</script>
<style >
.addDialog .el-input {
  width: 100% !important;
}
</style>
<style lang="scss" scoped>
@import "@/styles/public.scss";
.search-box {
  flex-wrap: wrap;
}
::v-deep .my-dialog {
  width: 50% !important;
}
.dialog ::v-deep .el-form {
  display: flex;
  justify-content: space-around;
}
.previewImg {
  width: 800px;
  height: 500px;
}
.previewVideo {
  width: 800px;
  height: 500px;
}
.previewBtn {
  margin: 10px;
}
::v-deep .el-dialog {
  height: auto;
  position: relative;
  margin: 0 auto 50px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  width: 50%;
}
::v-deep .el-dialog__title {
  color: #303133;
}
::v-deep .el-dialog__header {
  height: auto;
  padding: 20px 20px 10px;
  background-color: #fff;
}
::v-deep .el-dialog__body {
  height: auto;
  padding: 30px 20px;
}
.panelWrap {
  height: 100%;
}
.log-name {
  margin-right: 10px;
}
.activeLog {
  background: #eee;
}
.el-message-box__wrapper ::v-deep .el-input {
  width: 100% !important;
}
.main {
  width: 1000px;
}
.catalog {
  min-width: 180px;
}
.catalog-list {
  flex-flow: column;
  padding-top: 10px;
  .list-item {
    padding: 5px 10px;
    margin-bottom: 5px;
    cursor: pointer;
  }
  .list-item:hover {
    background: #eee;
  }
  .list-item:checked {
    background: #eee;
  }
}
.details {
  min-width: 250px;
}
.addCatalog {
  padding: 5px;
  color: var(--panelWrapTitle);
  background: #fff;
  border-color: #fff;
}
.el-icon-remove-outline::before {
  margin-right: 4px;
}
.pt {
  padding-top: 20px;
  > .el-select {
    width: 185px;
  }
}
.errorImg {
  display: inline-block;
  width: 60px;
  height: 60px;
}
.sys-input {
  width: 260px;
}
.icon-qingkong:before {
  margin-right: 4px;
}
</style>

